<template>
  <div id='mountNode'></div>
</template>

<script>
import G6 from '@antv/g6';
// import func from '../../../../../demo/vue-temp/vue-editor-bridge';

export default {
  name: 'start',
  created() {},
  mounted() {
    this.initG6();
  },
  methods: {
    initG6() {
      fetch(
        'https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json',
      )
        .then((res) => res.json())
        .then((data) => {
          const width = document.getElementById('mountNode').scrollWidth;
          const height = document.getElementById('mountNode').scrollHeight || 500;
          const graph = new G6.TreeGraph({
            container: 'mountNode',
            // 画布的大小宽高
            // width: 800,
            // height: 800,
            width,
            height,
            modes: {
              default: [
                // 展开收缩节点
                {
                  // type: 'collapse-expend',
                  // onChange: function onChange(item, collapsed) {
                  //   console.log(item)
                  //   const data = item.get('model').data;
                  //   data.collapsed = collapsed;
                  //   return true;
                  // },
                  type: 'collapse-expand',
                  onChange: function onChange(item, collapsed) {
                    console.log( item.get('model'))
                    const data = item.get('model').data;
                    data.collapsed = collapsed;
                    return true;
                  }
                },
                'drag-canvas', // 拖拽画布
                'zoom-canvas',  // 收缩画布
                'drag-node', // 拖拽节点
              ],
            },
            defaultNode: {
              size: 26,
              anchorPoints: [
                [0, 0.5],
                [1, 0.5],
              ],
              style: {
                cursor: 'pointer',
                fill: '#C6E5FF', // 文本颜色
                stroke: '#5B8FF9',
              },
            },
            //添加线条（边）的点击颜色
            edgeStateStyles: {
              myStateName: {
                stroke: 'red',
                lineWidth: 3,
              }
            },
            //添加节点的点击颜色
            nodeStateStyles: {
              myStateName: {
                stroke: 'green',
                lineWidth: 3,
              }
            },
            layout: {
              type: 'mindmap',
              direction: 'H',
              getHeight: () => (16),
              getWidth: () => (16),
              getVGap: () => (10),
              getHGap: () => (50),
            },
          });

          //添加节点点击颜色
          graph.on('node:click', e => {
            graph.setItemState(e.item, 'myStateName', true);
          })
          //添加连接线的点击颜色
          graph.on('edge:click', e => {
            graph.setItemState(e.item, 'myStateName', true)
          })
          //点击取消颜色
          graph.on('canvas:click', e => {
            graph.findAllByState('node', 'myStateName').forEach(node => {
              graph.setItemState(node, 'myStateName', false)
            });
            graph.findAllByState('edge', 'myStateName').forEach(edge => {
              graph.setItemState(edge, 'myStateName', false)
            })
          })

          let centerX = 0;
          graph.node(function (node) {
            // console.log(node.id);
            // console.log(centerX,'centerX')
            // console.log(node.x,'node.x')
            if (node.id === 'Modeling Methods') {
              centerX = node.x;
            }
            return {
              label: node.id,
              labelCfg: {
                position:
                  node.children && node.children.length > 0
                    ? 'left'
                    : node.x > centerX
                      ? 'right'
                      : 'left',
                offset: 5,
              },
            };
          });
          graph.data(data);
          graph.render();
          graph.fitView();
        });

      // scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视
      // 口中所用内容所需的最小高度。 没有垂直滚动条的情况下，
      // scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，
      // 但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。
      //     const width = document.getElementById('container').scrollWidth;
      //     const height = document.getElementById('container').scrollHeight || 500;
      //     const graph = new G6.TreeGraph({
      //       container: 'container',
      //       width,
      //       height,
      //   交互模式
      //       modes: {
      //         default: [
      //           {
      //             type: 'collapse-expand', //  收起和展开 Combo
      //             //  onChange：收起或展开的回调函数。警告：V3.1.2 版本中将移除；
      //             onChange: function onChange(item, collapsed) {
      //               const data = item.get('model').data; //  当前被操作的节点
      //               data.collapsed = collapsed; //  当前操作是收起还是展开
      //               return true;
      //             }
      //           },
      //           'drag-canvas', //  拖拽画布
      //           'zoom-canvas' //   放缩画布
      //         ]
      //       },
      //  在回调函数中使定义的交互状态 hover 生效。
      //       //          graph.on('itemcollapsed', e => {
      //       //      //    当前被操作的节点 item
      //       //     console.log(e.item);
      //       //    //  当前操作是收起（`true`）还是展开（`false`）
      //       //    console.log(e.collapsed);
      //       //  })
      //       defaultNode: {
      //         size: 26, // 节点的大小
      //         anchorPoints: [
      //           // 指定边连入节点的连接点的位置（相对于该节点而言），可以为空
      //           [0, 0.5],
      //           [1, 0.5]
      //         ],
      //         style: {
      //           fill: '#C6E5FF', // 文本颜色
      //           stroke: '#5B8FF9'
      //         }
      //       },
      //       defaultEdge: {
      //         // https:// g6.antv.vision/zh/docs/manual/middle/elements/edges/defaultEdge
      //         type: 'cubic-horizontal', // cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
      //         style: {
      //           stroke: '#A3B1BF' // 边的颜色
      //         }
      //       },
      //       layout: {
      //         // //  Object，可选，布局的方法及其配置项，默认为 random 布局。
      //         //  https:// g6.antv.vision/zh/docs/manual/middle/layout#mindmap
      //         type: 'mindmap', // 脑图布局
      //         direction: 'H', // layout 的方向。
      //         //  - H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧
      //         getHeight: () => {
      //           return 16; // 节点高度的回调函数
      //         },
      //         getWidth: () => {
      //           return 16; // 节点宽度的回调函数
      //         },
      //         getVGap: () => {
      //           return 10; // 节点纵向间距的回调函数
      //         },
      //         getHGap: () => {
      //           return 50; // 节点横向间距的回调函数
      //         }
      //       }
      //     });

      //     let centerX = 0;
      //     //      使用 graph.node() https:// g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode/#%E4%BD%BF%E7%94%A8-graphnode
      //     //  该方法可以为不同节点进行不同的配置。
      //     graph.node(function(node) {
      //       console.log(node.id);
      //       if (node.id === 'Modeling Methods') {
        //  判断同父节点id是否相等,分解节点
      //         centerX = node.x; // 格式化node数据
      //       }

      //       return {
      //         label: node.id,
      //         //  labelCfg Object 类型。配置标签文本。
      //         labelCfg: {
      //           //  文本相对于节点的位置
      //           //  配置文本标签：当有子节点的时候向左对齐，否则向右
      //           position:
      //             node.children && node.children.length > 0
      //               ? 'left'
      //               : node.x > centerX
      //               ? 'right'
      //               : 'left',
      //           offset: 5
      //         }
      //       };
      //     });

      //     graph.data(data); // 初始化的图数据，是一个包括 nodes 数组和 edges 数组的对象
      //     graph.render();
      //     graph.fitView(); // 开启后图自动适配画布大小。
      //   });
    },
  },
};
</script>
